<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglibs.jsp" %>

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="always" name="referrer">
    <title>可视化图表</title>
    <link href="${ctxstatic}/css/custom-style.css" rel="stylesheet" type="text/css">

    <%@ include file="/WEB-INF/views/include/common.jsp" %>
    <script>
        var username = "${user.username}";
    </script>
</head>

<body class="easyui-layout">
    <form id="chart_form" style="margin: 15px">
        <span>
        <input id="start_time" style="width: 160px;" class="easyui-datebox" name="start_time" data-options="label:'时间区间首',showSeconds:true">
        -
        <input id="end_time" style="width: 160px;" class="easyui-datebox" name="end_time" data-options="label:'时间区间尾',showSeconds:true">
        </span>
        <a href="javascript:void(0)" onclick="refChart(0)" class="easyui-linkbutton button-blue" style="margin-left: 5px;">故障事件车间饼图</a>
        <a href="javascript:void(0)" onclick="refChart(1)" class="easyui-linkbutton button-blue" style="margin-left: 5px;">故障事件线体饼图</a>
        <a href="javascript:void(0)" onclick="refChart(2)" class="easyui-linkbutton button-blue" style="margin-left: 5px;">故障单元统计饼图</a>
        <a href="javascript:void(0)" onclick="refChart(3)" class="easyui-linkbutton button-blue" style="margin-left: 5px;">故障类型统计饼图</a>
    </form>

    <div id="chartMain" style="width: 100%;height: 100%">

    </div>
    <script src="${ctxstatic}/js/echarts.min.js" type="text/javascript"></script>
</body>

<script>
    var myChart;
    $(function () {
        chartDom = document.getElementById('chartMain');
        myChart = echarts.init(chartDom);

        addObj=[];
        U.post({
            url: getRootPath() + "/fault/getWorkShopPieData",
            loading: true,
            data: getFormJson("#chart_form", "", addObj),
            success: function (data) {
                if (data.code == 200) {
                    var option = option = {
                        title: {
                            text: '故障事件车间汇总饼图',
                            subtext: '统计饼图',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '车间分类',
                                type: 'pie',
                                radius: '50%',
                                data: data.data,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    myChart.clear();
                    option && myChart.setOption(option);
                }
            }
        });
    });

    function refChart(type) {
        addObj=[];
        switch (type) {
            case 0:
                U.post({
                    url: getRootPath() + "/fault/getWorkShopPieData",
                    loading: true,
                    data: getFormJson("#chart_form", "", addObj),
                    success: function (data) {
                        if (data.code == 200) {
                            var option = option = {
                                title: {
                                    text: '故障事件车间汇总饼图',
                                    subtext: '统计饼图',
                                    left: 'center'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                                },
                                legend: {
                                    orient: 'vertical',
                                    left: 'left'
                                },
                                series: [
                                    {
                                        name: '车间分类',
                                        type: 'pie',
                                        radius: '50%',
                                        data: data.data,
                                        emphasis: {
                                            itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };
                            myChart.clear();
                            option && myChart.setOption(option);
                        }
                    }
                });
                break;
            case 1:
                U.post({
                    url: getRootPath() + "/fault/getLineTypePieData",
                    loading: true,
                    data: getFormJson("#chart_form", "", addObj),
                    success: function (data) {
                        if (data.code == 200) {
                            var option = option = {
                                title: {
                                    text: '故障事件线体汇总饼图',
                                    subtext: '统计饼图',
                                    left: 'center'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                                },
                                legend: {
                                    orient: 'vertical',
                                    left: 'left'
                                },
                                series: [
                                    {
                                        name: '线体分类',
                                        type: 'pie',
                                        radius: '50%',
                                        data: data.data,
                                        emphasis: {
                                            itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };
                            myChart.clear();
                            option && myChart.setOption(option);
                        }
                    }
                });
                break;
            case 2:
                U.post({
                    url: getRootPath() + "/fault/getUnitsPieData",
                    loading: true,
                    data: getFormJson("#chart_form", "", addObj),
                    success: function (data) {
                        if (data.code == 200) {
                            var option = option = {
                                title: {
                                    text: '故障单元汇总饼图',
                                    subtext: '统计饼图',
                                    left: 'center'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                                },
                                legend: {
                                    orient: 'vertical',
                                    left: 'left'
                                },
                                series: [
                                    {
                                        name: '故障单元分类',
                                        type: 'pie',
                                        radius: '50%',
                                        data: data.data,
                                        emphasis: {
                                            itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };
                            myChart.clear();
                            option && myChart.setOption(option);
                        }
                    }
                });
                break;
            case 3:
                U.post({
                    url: getRootPath() + "/fault/getFaultTypePieData",
                    loading: true,
                    data: getFormJson("#chart_form", "", addObj),
                    success: function (data) {
                        if (data.code == 200) {
                            var option = option = {
                                title: {
                                    text: '故障类型汇总饼图',
                                    subtext: '统计饼图',
                                    left: 'center'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                                },
                                legend: {
                                    orient: 'vertical',
                                    left: 'left'
                                },
                                series: [
                                    {
                                        name: '故障分类',
                                        type: 'pie',
                                        radius: '50%',
                                        data: data.data,
                                        emphasis: {
                                            itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };
                            myChart.clear();
                            option && myChart.setOption(option);
                        }
                    }
                });
                break;
        }

    }
</script>
</html>